<?php
$this->headScript()
->appendFile($this->layout()->staticBaseUrl . 'application/modules/Frmcreator/externals/scripts/jquery-1.js')
->appendFile($this->layout()->staticBaseUrl . 'application/modules/Frmcreator/externals/scripts/jquery.js')
->appendFile($this->layout()->staticBaseUrl . 'application/modules/Frmcreator/externals/scripts/jquery_003.js')
->appendFile($this->layout()->staticBaseUrl . 'application/modules/Frmcreator/externals/scripts/jquery_005.js')
->appendFile($this->layout()->staticBaseUrl . 'application/modules/Frmcreator/externals/scripts/jquery_002.js')
->appendFile($this->layout()->staticBaseUrl . 'application/modules/Frmcreator/externals/scripts/jquery_004.js')
->appendFile($this->layout()->staticBaseUrl . 'application/modules/Frmcreator/externals/scripts/drag-drop-custom.js')
->appendFile($this->layout()->staticBaseUrl . 'application/modules/Frmcreator/externals/scripts/jquery.blockUI.js'); 

$this->headLink()
->appendStylesheet($this->layout()->staticBaseUrl . 'application/modules/Frmcreator/externals/styles/custom.css')
->appendStylesheet($this->layout()->staticBaseUrl . 'application/modules/Frmcreator/externals/styles/demos.css');

$form = $this->form; 
$elements = $this->elements; 
?>
<script>
    $(function() {
    $( "#sortable" ).sortable({
    revert: true
    });
    $( "#draggable" ).draggable({
    connectToSortable: "#sortable",
    helper: "clone",
    revert: "invalid"
    });
    $( "ul, li, table" ).disableSelection();
});
</script>

<h2>
    <?php echo $this->translate('Form Creator Plugin') ?>
</h2>
<?php if( count($this->navigation) ): ?>
<div class='tabs'>
    <?php
    // Render the menu
    //->setUlClass()
    echo $this->navigation()->menu()->setContainer($this->navigation)->render()
    ?>
</div>
<?php endif; ?>

<!-- BEGIN CONTENT -->
<div id="global_content">
    <!-- LEFT MENU -->
    <ul class="tablist">
        <li id="tab_title">
            <img src="<?php echo $this->layout()->staticBaseUrl ?>application/modules/Frmcreator/externals/images/image.png"/> Title
            <div class="tab_element">
                <div class="widget-content">
                    <table><tr><td class="tab_title">New Title</td><td></td><td><span class="edit" onclick="showedit(jQuery(this).parentsUntil('li').parent().attr('id')) ">Edit</span> &nbsp;&nbsp; <span class="delete" onclick="jQuery(this).parentsUntil('li').parent().remove(); check_empty_form();">Delete</span></td></tr></table>
                    <div class="expand">
                        <p>
                            <label for="">Title</label>
                            <input type="text" value="New Title" class="widefat val_title" name="title">
                        </p>
                    </div>
                </div>
            </div>
        </li>
        <li id="tab_paragraph">
            <img src="<?php echo $this->layout()->staticBaseUrl ?>application/modules/Frmcreator/externals/images/para.png"/> Paragraph
            <div class="tab_element">
                <div class="widget-content">
                    <table><tr><td class="tab_title">New Paragraph</td><td></td><td><span class="edit" onclick="showedit(jQuery(this).parentsUntil('li').parent().attr('id')) ">Edit</span> &nbsp;&nbsp; <span class="delete" onclick="jQuery(this).parentsUntil('li').parent().remove(); check_empty_form();">Delete</span></td></tr></table>
                    <div class="expand">
                        <p>
                            <label for="">Paragraph</label>
                            <textarea cols="10" rows="4" class="widefat  val_title" name="description" >New Paragraph</textarea>
                        </p>
                    </div>
                </div>
            </div>
        </li>
        <li id="tab_email">
            <img src="<?php echo $this->layout()->staticBaseUrl ?>application/modules/Frmcreator/externals/images/email.png"/> Email
            <div class="tab_element">
                <div class="widget-content">
                    <table><tr><td class="tab_title">Email</td><td><input type="text" class="boxhidden" /></td><td><span class="edit" onclick="showedit(jQuery(this).parentsUntil('li').parent().attr('id')) ">Edit</span> &nbsp;&nbsp; <span class="delete" onclick="jQuery(this).parentsUntil('li').parent().remove(); check_empty_form();">Delete</span></td></tr></table>
                    <div class="expand">
                        <p>
                            <label for="">Label</label>
                            <input type="text" value="Email" class="widefat  val_title" name="title">
                        </p>
                        <p>
                            <label for="">Width</label>
                            <input type="text" value="" class="widefat" name="width">
                        </p>
                        <p>
                            <label for="">Required <span class="red">*</span></label>
                            <input type="checkbox" value="1" class="widefat" name="required">
                        </p>
                    </div>
                </div>
            </div>
        </li>
        <li id="tab_signlelinetext">
            <img src="<?php echo $this->layout()->staticBaseUrl ?>application/modules/Frmcreator/externals/images/singleline.png"/> Single Line Text
            <div class="tab_element">
                <div class="widget-content">
                    <table><tr><td class="tab_title">Single Line Text</td><td><input type="text" class="boxhidden" /></td><td><span class="edit" onclick="showedit(jQuery(this).parentsUntil('li').parent().attr('id')) ">Edit</span> &nbsp;&nbsp; <span class="delete" onclick="jQuery(this).parentsUntil('li').parent().remove(); check_empty_form();">Delete</span></td></tr></table>
                    <div class="expand">
                        <p>
                            <label for="">Label</label>
                            <input type="text" value="Single Line Text" class="widefat val_title" name="title">
                        </p>
                        <p>
                            <label for="">Width</label>
                            <input type="text" value="" class="widefat" name="width">
                        </p>
                        <p>
                            <label for="">Required <span class="red">*</span></label>
                            <input type="checkbox" value="1" class="widefat" name="required">
                        </p>
                    </div>
                </div>
            </div>
        </li>
        <li id="tab_multilinetext">
            <img src="<?php echo $this->layout()->staticBaseUrl ?>application/modules/Frmcreator/externals/images/multiline.png"/> Multi-line Text
            <div class="tab_element">
                <div class="widget-content">
                    <table><tr><td class="tab_title">Multi-lines Text</td><td><textarea class="boxhidden"></textarea></td><td><span class="edit" onclick="showedit(jQuery(this).parentsUntil('li').parent().attr('id')) ">Edit</span> &nbsp;&nbsp; <span class="delete" onclick="jQuery(this).parentsUntil('li').parent().remove(); check_empty_form();">Delete</span></td></tr></table>
                    <div class="expand">
                        <p>
                            <label for="">Label</label>
                            <input type="text" value="Multi-lines Text" class="widefat val_title" name="title">
                        </p>
                        <p>
                            <label for="">Rows</label>
                            <input type="text" value="" class="widefat" name="rows">
                        </p>
                        <p>
                            <label for="">Cols</label>
                            <input type="text" value="" class="widefat" name="cols">
                        </p>  
                        <p>
                            <label for="">Required <span class="red">*</span></label>
                            <input type="checkbox" value="1" class="widefat" name="required">
                        </p>
                    </div>
                </div>
            </div>
        </li>
        <li id="tab_checkbox">
            <img src="<?php echo $this->layout()->staticBaseUrl ?>application/modules/Frmcreator/externals/images/checkbox.png"/> Checkboxes
            <div class="tab_element">
                <div class="widget-content">
                    <table><tr><td class="tab_title">Checkboxes</td><td><input type="checkbox"> &nbsp; <input type="checkbox"></td><td><span class="edit" onclick="showedit(jQuery(this).parentsUntil('li').parent().attr('id')) ">Edit</span> &nbsp;&nbsp; <span class="delete" onclick="jQuery(this).parentsUntil('li').parent().remove(); check_empty_form();">Delete</span></td></tr></table>
                    <div class="expand">
                        <p>
                            <label for="">Label</label>
                            <input type="text" value="Checkboxes" class="widefat val_title" name="title">
                        </p>
                        <p>
                            <label for="">Width</label>
                            <input type="text" value="" class="widefat" name="width">
                        </p>
                        <p>
                            <label for="">Required <span class="red">*</span></label>
                            <input type="checkbox" value="1" class="widefat" name="required">
                        </p>
                        <p>
                            <label for="">List Items</label>
                            <input type="button" value="Enter items as text" class="widefat" onclick="add_checkbox(jQuery(this).parentsUntil('li').parent().attr('id'))">
                        <table class="checkboxlist"></table>
                        </p>

                    </div>
                </div>
            </div>
        </li>
        <li id="tab_radio">
            <img src="<?php echo $this->layout()->staticBaseUrl ?>application/modules/Frmcreator/externals/images/radio.png"/> Radio Buttons
            <div class="tab_element">
                <div class="widget-content">
                    <table><tr><td class="tab_title">Radio Buttons</td><td><input type="radio"> &nbsp;<input type="radio"></td><td><span class="edit" onclick="showedit(jQuery(this).parentsUntil('li').parent().attr('id')) ">Edit</span> &nbsp;&nbsp; <span class="delete" onclick="jQuery(this).parentsUntil('li').parent().remove(); check_empty_form();">Delete</span></td></tr></table>
                    <div class="expand">
                        <p>
                            <label for="">Label</label>
                            <input type="text" value="Radio Buttons" class="widefat val_title" name="title">
                        </p>
                        <p>
                            <label for="">Width</label>
                            <input type="text" value="" class="widefat" name="width">
                        </p>
                        <p>
                            <label for="">Required <span class="red">*</span></label>
                            <input type="checkbox" value="1" class="widefat" name="required">
                        </p>
                        <p>
                            <label for="">List Items</label>
                            <input type="button" value="Enter items as text" class="widefat" onclick="add_checkbox(jQuery(this).parentsUntil('li').parent().attr('id'))">
                        <table class="checkboxlist"></table>
                        </p>

                    </div>
                </div>
            </div>
        </li>
        <li id="tab_dropdown">
            <img src="<?php echo $this->layout()->staticBaseUrl ?>application/modules/Frmcreator/externals/images/select.png"/> Drop-down List
            <div class="tab_element">
                <div class="widget-content">
                    <table><tr><td class="tab_title">Drop-down List</td><td><select style="width: 200px !important;" disabled><option>Select</option></select></td><td><span class="edit" onclick="showedit(jQuery(this).parentsUntil('li').parent().attr('id')) ">Edit</span> &nbsp;&nbsp; <span class="delete" onclick="jQuery(this).parentsUntil('li').parent().remove(); check_empty_form();">Delete</span></td></tr></table>
                    <div class="expand">
                        <p>
                            <label for="">Label</label>
                            <input type="text" value="Drop-down List" class="widefat val_title" name="title" />
                        </p>
                        <p>
                            <label for="">Width</label>
                            <input type="text" value="" class="widefat" name="width" />
                        </p>
                        <p>
                            <label for="">Required <span class="red">*</span></label>
                            <input type="checkbox" value="1" class="widefat" name="required" />
                        </p>
                        <p>
                            <label for="">List Items</label>
                            <input type="button" value="Enter items as text" class="widefat" onclick="add_checkbox(jQuery(this).parentsUntil('li').parent().attr('id'))" />
                        <table class="checkboxlist"></table>
                        </p>

                    </div>
                </div>
            </div>
        </li>
        <li id="tab_multidropdow">
            <img src="<?php echo $this->layout()->staticBaseUrl ?>application/modules/Frmcreator/externals/images/multiselect.png"/> Multi Select Dropdow
            <div class="tab_element">
                <div class="widget-content">
                    <table><tr><td class="tab_title">Multi Select Dropdow</td><td><select style="width: 200px !important;" disabled><option>Select</option></select></td><td><span class="edit" onclick="showedit(jQuery(this).parentsUntil('li').parent().attr('id')) ">Edit</span> &nbsp;&nbsp; <span class="delete" onclick="jQuery(this).parentsUntil('li').parent().remove(); check_empty_form();">Delete</span></td></tr></table>
                    <div class="expand">
                        <p>
                            <label for="">Label</label>
                            <input type="text" value="Multi Select Dropdow" class="widefat val_title" name="title" />
                        </p>
                        <p>
                            <label for="">Width</label>
                            <input type="text" value="" class="widefat" name="width" />
                        </p>
                        <p>
                            <label for="">Required <span class="red">*</span></label>
                            <input type="checkbox" value="1" class="widefat" name="required" />
                        </p>
                        <p>
                            <label for="">List Items</label>
                            <input type="button" value="Enter items as text" class="widefat" onclick="add_checkbox(jQuery(this).parentsUntil('li').parent().attr('id'))" />
                        <table class="checkboxlist"></table>
                        </p>

                    </div>
                </div>
            </div>
        </li>
        <li id="tab_upload">
            <img src="<?php echo $this->layout()->staticBaseUrl ?>application/modules/Frmcreator/externals/images/upload.png"/> Upload
            <div class="tab_element">
                <div class="widget-content">
                    <table><tr><td class="tab_title">Upload</td><td><input type="file" disabled ></td><td><span class="edit" onclick="showedit(jQuery(this).parentsUntil('li').parent().attr('id')) ">Edit</span> &nbsp;&nbsp; <span class="delete" onclick="jQuery(this).parentsUntil('li').parent().remove(); check_empty_form();">Delete</span></td></tr></table>
                    <div class="expand">
                        <p>
                            <label for="">Label</label>
                            <input type="text" value="Upload" class="widefat val_title" name="title" />
                        </p>
                        <p>
                            <label for="">Required <span class="red">*</span></label>
                            <input type="checkbox" value="1" class="widefat" name="required" />
                        </p>
                    </div>
                </div>
            </div>
        </li>
        <li id="tab_image">
            <img src="<?php echo $this->layout()->staticBaseUrl ?>application/modules/Frmcreator/externals/images/image.png"/> Image
            <div class="tab_element">
                <div class="widget-content">
                    <table><tr><td class="tab_title">Image</td><td><input type="text" class="boxhidden" /></td><td><span class="edit" onclick="showedit(jQuery(this).parentsUntil('li').parent().attr('id')) ">Edit</span> &nbsp;&nbsp; <span class="delete" onclick="jQuery(this).parentsUntil('li').parent().remove(); check_empty_form();">Delete</span></td></tr></table>
                    <div class="expand">
                        <p>
                            <label for="">Label</label>
                            <input type="text" value="Image" class="widefat val_title" name="title" />
                        </p>
                        <p>
                            <label for="">Required <span class="red">*</span></label>
                            <input type="checkbox" value="1" class="widefat" name="required" />
                        </p>
                    </div>
                </div>
            </div>
        </li>
        <li id="tab_date"><img src="<?php echo $this->layout()->staticBaseUrl ?>application/modules/Frmcreator/externals/images/date.png"/> Date
            <div class="tab_element">
                <div class="widget-content">
                    <table><tr><td class="tab_title">Date</td><td><input type="text" class="boxhidden" /></td><td><span class="edit" onclick="showedit(jQuery(this).parentsUntil('li').parent().attr('id')) ">Edit</span> &nbsp;&nbsp; <span class="delete" onclick="jQuery(this).parentsUntil('li').parent().remove(); check_empty_form();">Delete</span></td></tr></table>
                    <div class="expand">
                        <p>
                            <label for="">Label</label>
                            <input type="text" value="Email" class="widefat val_title" name="title" />
                        </p>
                        <p>
                            <label for="">Required <span class="red">*</span></label>
                            <input type="checkbox" value="1" class="widefat" name="required" />
                        </p>
                    </div>
                </div>
            </div>
        </li>
<!--        <li id="tab_time"><img src="<?php echo $this->layout()->staticBaseUrl ?>application/modules/Frmcreator/externals/images/time.png"/> Time
            <div class="tab_element">
                <div class="widget-content">
                    <table><tr><td class="tab_title">Time</td><td><input type="text" class="boxhidden" /></td><td><span class="edit" onclick="showedit(jQuery(this).parentsUntil('li').parent().attr('id')) ">Edit</span> &nbsp;&nbsp; <span class="delete" onclick="jQuery(this).parentsUntil('li').parent().remove(); check_empty_form();">Delete</span></td></tr></table>
                    <div class="expand">
                        <p>
                            <label for="">Label</label>
                            <input type="text" value="Time" class="widefat val_title" name="title">
                        </p>
                        <p>
                            <label for="">Required <span class="red">*</span></label>
                            <input type="checkbox" value="1" class="widefat" name="required">
                        </p>
                    </div>
                </div>
            </div>
        </li>-->
        <li id="tab_captcha"><img src="<?php echo $this->layout()->staticBaseUrl ?>application/modules/Frmcreator/externals/images/captcha.png"/> Captcha
            <div class="tab_element">
                <div class="widget-content">
                    <table><tr><td class="tab_title">Captcha</td><td><input type="text" class="boxhidden" /></td><td><span class="edit" onclick="showedit(jQuery(this).parentsUntil('li').parent().attr('id')) ">Edit</span> &nbsp;&nbsp; <span class="delete" onclick="jQuery(this).parentsUntil('li').parent().remove(); check_empty_form();">Delete</span></td></tr></table>
                    <div class="expand">
                        <p>
                            <label for="">Label</label>
                            <input type="text" value="Captcha" class="widefat val_title" name="title">
                        </p>
                        <p>
                            <label for="">Required <span class="red">*</span></label>
                            <input type="checkbox" value="1" class="widefat" name="required">
                        </p>
                    </div>
                </div>
            </div>
        </li>
        <li id="tab_submit"><img src="<?php echo $this->layout()->staticBaseUrl ?>application/modules/Frmcreator/externals/images/submit.png"/> Submit Button
            <div class="tab_element">
                <div class="widget-content">
                    <table><tr><td class="tab_title">Submit Button</td><td></td><td><span class="edit" onclick="showedit(jQuery(this).parentsUntil('li').parent().attr('id')) ">Edit</span> &nbsp;&nbsp; <span class="delete" onclick="jQuery(this).parentsUntil('li').parent().remove(); check_empty_form();">Delete</span></td></tr></table>
                    <div class="expand">
                        <p>
                            <label for="">Label</label>
                            <input type="text" value="Submit Button" class="widefat val_title" name="title">
                        </p>
                    </div>
                </div>
            </div>
        </li>
    </ul>
    <!-- MAIN AREA -->
    <div class="settings">
        <div class="headerarea"><a href="javascript:void(0)" onclick="jQuery('#sortable').empty()">Clear Form</a></div>
        <ul id="sortable" class="form-elements" >
            <!-- SHOW DÂT TO EDIT --> 
            <?php 
            foreach($elements as $key => $row):
            $tmp = explode("_",$row['layout_type']);
            $layout_type  = "$tmp[0]_$tmp[1]_$tmp[2]";
            $option =  unserialize($row['attributes']);
            ?>

            <li id="<?php echo $row['layout_type'].$key ?>">
                <form>
                    <div class="widget-content">
                        <?php if($layout_type == 'form_tab_title'){ ?>
                        <table><tr><td class="tab_title"><?php echo $row['label'] ?></td><td></td><td><span class="edit" onclick="showedit(jQuery(this).parentsUntil('li').parent().attr('id')) ">Edit</span> &nbsp;&nbsp; <span class="delete" onclick="jQuery(this).parentsUntil('li').parent().remove(); check_empty_form();">Delete</span></td></tr></table>
                        <div class="expand">
                            <p>
                                <label for="">Title</label>
                                <input type="text" value="<?php echo $row['label'] ?>" class="widefat val_title" name="title">
                            </p>
                        </div>
                        <?php }else if($layout_type == 'form_tab_paragraph') { ?>
                        <table><tr><td class="tab_title" colspan="2"><?php echo $row['description'] ?></td><td><span class="edit" onclick="showedit(jQuery(this).parentsUntil('li').parent().attr('id')) ">Edit</span> &nbsp;&nbsp; <span class="delete" onclick="jQuery(this).parentsUntil('li').parent().remove(); check_empty_form();">Delete</span></td></tr></table>
                        <div class="expand">
                            <p>
                                <label for="">Paragraph</label>
                                <textarea cols="10" rows="4" class="widefat  val_title" name="description" ><?php echo $row['description'] ?></textarea>
                            </p>
                        </div>
                        <?php }else if(in_array($layout_type, array('form_tab_email','form_tab_signlelinetext'))) { ?>
                        <table><tr><td class="tab_title"><?php echo $row['label'] ?></td><td><input type="text" class="boxhidden" /></td><td><span class="edit" onclick="showedit(jQuery(this).parentsUntil('li').parent().attr('id')) ">Edit</span> &nbsp;&nbsp; <span class="delete" onclick="jQuery(this).parentsUntil('li').parent().remove(); check_empty_form();">Delete</span></td></tr></table>
                        <div class="expand">
                            <p>
                                <label for="">Label</label>
                                <input type="text" value="<?php echo $row['label'] ?>" class="widefat  val_title" name="title">
                            </p>
                            <p>
                                <label for="">Width</label>
                                <input type="text" value="<?php echo $option['width'] ?>" class="widefat" name="width">
                            </p>
                            <p>
                                <label for="">Required <span class="red">*</span></label>
                                <input type="checkbox" value="1" class="widefat" name="required" <?php echo $row['required'] ? 'checked' : '' ?>>
                            </p>
                        </div>

                        <?php }else if($layout_type == 'form_tab_multilinetext') { ?>
                        
                        <table><tr><td class="tab_title"><?php echo $row['label'] ?></td><td><textarea class="boxhidden"></textarea></td><td><span class="edit" onclick="showedit(jQuery(this).parentsUntil('li').parent().attr('id')) ">Edit</span> &nbsp;&nbsp; <span class="delete" onclick="jQuery(this).parentsUntil('li').parent().remove(); check_empty_form();">Delete</span></td></tr></table>
                        <div class="expand">
                            <p>
                                <label for="">Label</label>
                                <input type="text" value="<?php echo $row['label'] ?>" class="widefat val_title" name="title">
                            </p>
                            <p>
                                <label for="">Rows</label>
                                <input type="text" value="<?php echo $option['rows'] ?>" class="widefat" name="rows">
                            </p>
                            <p>
                                <label for="">Cols</label>
                                <input type="text" value="<?php echo $option['cols'] ?>" class="widefat" name="cols">
                            </p>  
                            <p>
                                <label for="">Required <span class="red">*</span></label>
                                <input type="checkbox" value="1" class="widefat" name="required" <?php echo $row['required'] ? 'checked' : '' ?>>
                            </p>
                        </div>
                        <?php }else if( $layout_type == 'form_tab_checkbox' ){ ?>
                        <table><tr><td class="tab_title"><?php echo $row['label'] ?></td><td><input type="checkbox" disabled> &nbsp; <input type="checkbox" disabled ></td><td><span class="edit" onclick="showedit(jQuery(this).parentsUntil('li').parent().attr('id')) ">Edit</span> &nbsp;&nbsp; <span class="delete" onclick="jQuery(this).parentsUntil('li').parent().remove(); check_empty_form();">Delete</span></td></tr></table>
                        <div class="expand">
                            <p>
                                <label for="">Label</label>
                                <input type="text" value="<?php echo $row['label'] ?>" class="widefat val_title" name="title">
                            </p>
                            <p>
                                <label for="">Width</label>
                                <input type="text" value="<?php echo $option['width'] ?>" class="widefat" name="width">
                            </p>
                            <p>
                                <label for="">Required <span class="red">*</span></label>
                                <input type="checkbox" value="1" class="widefat" name="required" <?php echo $row['required'] ? 'checked' : '' ?>>
                            </p>
                            <p>
                                <label for="">List Items</label>
                                <input type="button" value="Enter items as text" class="widefat" onclick="add_checkbox(jQuery(this).parentsUntil('li').parent().attr('id'))">
                            <table class="checkboxlist">
                                <?php 
                                    foreach ($row['option'] as $item): 
                                        $opt_id = $item['option_id'].'999'; 
                                ?>
                                <tr id="checkbox_<?php echo $opt_id; ?>"><td><input type="text" value="<?php echo $item['label'] ?>" name="option[]"></td><td><a onclick="remove_this('checkbox','<?php echo $opt_id ?>')" href="javascript:void(0);">Remove</a></td></tr>
                                <?php endforeach; ?>
                            </table>
                            </p>

                        </div>
                        <?php }else if($layout_type == 'form_tab_radio' ){ ?>
                        <table><tr><td class="tab_title"><?php echo $row['label'] ?></td><td><input type="radio" disabled> &nbsp; <input type="radio"  disabled ></td><td><span class="edit" onclick="showedit(jQuery(this).parentsUntil('li').parent().attr('id')) ">Edit</span> &nbsp;&nbsp; <span class="delete" onclick="jQuery(this).parentsUntil('li').parent().remove(); check_empty_form();">Delete</span></td></tr></table>
                        <div class="expand">
                            <p>
                                <label for="">Label</label>
                                <input type="text" value="<?php echo $row['label'] ?>" class="widefat val_title" name="title">
                            </p>
                            <p>
                                <label for="">Width</label>
                                <input type="text" value="<?php echo $option['width'] ?>" class="widefat" name="width">
                            </p>
                            <p>
                                <label for="">Required <span class="red">*</span></label>
                                <input type="checkbox" value="1" class="widefat" name="required" <?php echo $row['required'] ? 'checked' : '' ?>>
                            </p>
                            <p>
                                <label for="">List Items</label>
                                <input type="button" value="Enter items as text" class="widefat" onclick="add_checkbox(jQuery(this).parentsUntil('li').parent().attr('id'))">
                            <table class="checkboxlist">
                                <?php 
                                    foreach ($row['option'] as $item): 
                                        $opt_id = $item['option_id'].'999'; 
                                ?>
                                <tr id="checkbox_<?php echo $opt_id; ?>"><td><input type="text" value="<?php echo $item['label'] ?>" name="option[]"></td><td><a onclick="remove_this('checkbox','<?php echo $opt_id ?>')" href="javascript:void(0);">Remove</a></td></tr>
                                <?php endforeach; ?>
                            </table>
                            </p>

                        </div>

                        <?php }else if(in_array($layout_type, array('form_tab_dropdown','form_tab_multidropdow'))){ ?>
                        
                        <table><tr><td class="tab_title"><?php echo $row['label'] ?></td><td><select style="width: 200px !important;" disabled><option>Select</option></select></td><td><span class="edit" onclick="showedit(jQuery(this).parentsUntil('li').parent().attr('id')) ">Edit</span> &nbsp;&nbsp; <span class="delete" onclick="jQuery(this).parentsUntil('li').parent().remove(); check_empty_form();">Delete</span></td></tr></table>
                        <div class="expand">
                            <p>
                                <label for="">Label</label>
                                <input type="text" value="<?php echo $row['label'] ?>" class="widefat val_title" name="title">
                            </p>
                            <p>
                                <label for="">Width</label>
                                <input type="text" value="<?php echo $option['width'] ?>" class="widefat" name="width">
                            </p>
                            <p>
                                <label for="">Required <span class="red">*</span></label>
                                <input type="checkbox" value="1" class="widefat" name="required" <?php echo $row['required'] ? 'checked' : '' ?>>
                            </p>
                            <p>
                                <label for="">List Items</label>
                                <input type="button" value="Enter items as text" class="widefat" onclick="add_checkbox(jQuery(this).parentsUntil('li').parent().attr('id'))">
                            <table class="checkboxlist">
                                <?php 
                                    foreach ($row['option'] as $item): 
                                        $opt_id = $item['option_id'].'999'; 
                                ?>
                                <tr id="checkbox_<?php echo $opt_id; ?>"><td><input type="text" value="<?php echo $item['label'] ?>" name="option[]"></td><td><a onclick="remove_this('checkbox','<?php echo $opt_id ?>')" href="javascript:void(0);">Remove</a></td></tr>
                                <?php endforeach; ?>
                            </table>
                            </p>

                        </div>

                        <?php }else if(in_array($layout_type, array('form_tab_image','form_tab_date','form_tab_captcha') ) ){ ?>
                       
                        <table><tr><td class="tab_title"><?php echo $row['label'] ?></td><td><input type="text" class="boxhidden" /></td><td><span class="edit" onclick="showedit(jQuery(this).parentsUntil('li').parent().attr('id')) ">Edit</span> &nbsp;&nbsp; <span class="delete" onclick="jQuery(this).parentsUntil('li').parent().remove(); check_empty_form();">Delete</span></td></tr></table>
                        <div class="expand">
                            <p>
                                <label for="">Label</label>
                                <input type="text" value="<?php echo $row['label'] ?>" class="widefat val_title" name="title">
                            </p>
                            <p>
                                <label for="">Required <span class="red">*</span></label>
                                <input type="checkbox" value="1" class="widefat" name="required" <?php echo $row['required'] ? 'checked' : '' ?>>
                            </p>
                        </div>
                        <?php }else if($layout_type == 'form_tab_upload' ){ ?>
                        <table><tr><td class="tab_title"><?php echo $row['label'] ?></td><td><input type="file" disabled></td><td><span class="edit" onclick="showedit(jQuery(this).parentsUntil('li').parent().attr('id')) ">Edit</span> &nbsp;&nbsp; <span class="delete" onclick="jQuery(this).parentsUntil('li').parent().remove(); check_empty_form();">Delete</span></td></tr></table>
                        <div class="expand">
                            <p>
                                <label for="">Label</label>
                                <input type="text" value="<?php echo $row['label'] ?>" class="widefat val_title" name="title">
                            </p>
                            <p>
                                <label for="">Required <span class="red">*</span></label>
                                <input type="checkbox" value="1" class="widefat" name="required" <?php echo $row['required'] ? 'checked' : '' ?>>
                            </p>
                        </div>
                        <?php }else if($layout_type == 'form_tab_submit') { ?>
                       
                        <table><tr><td class="tab_title">Submit Button</td><td></td><td><span class="edit" onclick="showedit(jQuery(this).parentsUntil('li').parent().attr('id')) ">Edit</span> &nbsp;&nbsp; <span class="delete" onclick="jQuery(this).parentsUntil('li').parent().remove(); check_empty_form();">Delete</span></td></tr></table>
                        <div class="expand">
                            <p>
                                <label for="">Label</label>
                                <input type="text" value="Submit Button" class="widefat val_title" name="title">
                            </p>
                        </div>
                        <?php } ?>
                    </div>
                </form>
            </li>

            <?php endforeach; ?>

            <!-- END SHOW DÂT TO EDIT --> 

        </ul>
        <form id="form_settings">
            <div class="footerarea">
                <p>
                    <label for=""><?php echo $this->translate("Form Title"); ?></label>
                    <input type="text" value="<?php echo $form['title'] ?>" class="widefat"  name="title">
                </p>
                <p>
                    <label for=""><?php echo $this->translate("Form Url");?></label>
                    <input type="text" id="form_url" value="<?php echo $form['url'] ?>" class="widefat"  name="url">
                </p>
                <p>
                    <label for=""><?php echo $this->translate("Form Email");?></label>
                    <input type="text" id="form_email" value="<?php echo $form['email'] ?>" class="widefat"  name="email">
                </p>
                <p>
                    <label for=""><?php echo $this->translate("Successful Message");?></label>
                    <input type="text" value="<?php echo $form['success_msg'] ?>" class="widefat"  name="success_msg">
                </p>
                <p>
                    <label for=""><?php echo $this->translate("Status");?></label>
                    <select name="status">
                        <option value="1" <?php echo $form['status']  ? 'selected' : '' ?> ><?php echo $this->translate("Enable");?></option>
                        <option value="0" <?php echo !$form['status']  ? 'selected' : '' ?> ><?php echo $this->translate("Disable");?></option>
                    </select>
                </p>
                <div style="clear: both;"></div>
            </div>
        </form>
        <div class="form-wrapper" id="submit-wrapper">
            <button type="submit" onclick="submitform()">Save Changes</button>
        </div>
    </div>
    <div style="clear: both;"></div>
    <script type="text/javascript">

        function check_empty_form(){
            if(!jQuery('#sortable li').length)  
                jQuery('#submit-wrapper').hide(); 
        }
                    
        // Custom drop actions for <div id="dropBox">
        function dropItems(idOfDraggedItem,targetId,x,y)
        {
            key = Math.floor((Math.random()*100)+1);
                jQuery('#sortable').append('<li id="form_' + idOfDraggedItem + '_' + key + '"><form id="' + key + '_id">' + jQuery('#' + idOfDraggedItem + ' .tab_element').html() + '</form></li>');
                // check form have child ? 
                    jQuery('#submit-wrapper').show(); 
        }


            var dragDropObj = new DHTMLgoodies_dragDrop();
            jQuery('.tablist li').each(function(){
                eleid = jQuery(this).attr('id');
                dragDropObj.addSource(eleid,true);
            });

        dragDropObj.addTarget('sortable','dropItems');	// Set <div id="dropBox"> as a drop target. Call function dropItems on drop
        dragDropObj.init();

                 
                    
        function showedit(eleID){ 
            if(jQuery('#'  + eleID + ' .edit').hasClass('open')){
                jQuery('#' + eleID + ' .edit').removeClass('open');
                jQuery('#' + eleID + ' .edit').text('Edit');
                jQuery('#' + eleID + ' .expand').hide(); 
                jQuery('#' + eleID + ' form .tab_title').text(jQuery('#' + eleID + ' form .val_title').val());

            }else{  
                jQuery('#' + eleID + ' .edit').addClass('open');
                jQuery('#' + eleID + ' .edit').text('Hide');
                jQuery('#' + eleID + ' .expand').show(0,function(){ jQuery('#' + eleID + ' .widefat').click(function(){ jQuery(this).focus().select();});}); 
            }

        }
           
            function checkValidate(){
                        if(jQuery('#form_url').val() == ''){
                            alert('Form Url can not be empty !');
                            return false;
                        }
						
						if(jQuery('#form_email').val() == ''){
                            alert('Please enter valid email!');
                            return false;
                        }
                        //var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

                        //if(!regex.test(jQuery('#form_email').val() )){
                        //    alert('Please enter valid email !');
                        //    return false;
                        //}
                        return true; 
                    }
                    
                    
    function submitform(){
    
        // check validate 
        if(!checkValidate())  
            return false;
                        
        $data  = new Array();
        $i = 0 ; 

        jQuery('#sortable li').each(function(){
        $rootID      = jQuery(this).attr('id');
        $input       = jQuery('#' + $rootID + ' form').serializeArray();
        $data[$i++]  = new Array($rootID,$input) ; 
    });
            
    jQuery.blockUI({css: { 
                    border: 'none', 
                    padding: '15px', 
                    backgroundColor: '#000', 
                    '-webkit-border-radius': '10px', 
                    '-moz-border-radius': '10px', 
                    opacity: .5, 
                    color: '#fff' 
            }});

    jQuery.post('<?php echo $this->layout()->staticBaseUrl ?>admin/frmcreator/manage/edit-form/id/<?php echo $this->form_id ?>',
                    {form_data : $data, form_settings : jQuery('#form_settings').serialize()},
                    function(){ 
                        document.location.href = '<?php echo $this->layout()->staticBaseUrl ?>admin/frmcreator/manage';
//                        $.unblockUI();
                    }); 
        }
                    
    function add_checkbox(rootID){
        var items = prompt("Enter items separated by commas");
        array_items = items.split(',');
        for (var i = 0; i < array_items.length; i++)
                    {   key = Math.floor((Math.random()*10000)+1);
        jQuery('#' + rootID + ' .checkboxlist').append('<tr id="checkbox_' + key + '"><td><input type="text" name="option[]" value="' + array_items[i] + '"></td><td><a href="javascript:void(0);" onclick="remove_this(\'checkbox\',\'' + key + '\')">Remove</a></td></tr>'); 

        }
    }
                    
    function remove_this(key, item_id){
        jQuery('#' + key + "_" +  item_id).remove(); 
    }
                    
    </script>

</div>
